<!DOCTYPE html>
<html lang="zh - CN">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale = 1.0">
    <title>新闻列表功能</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
        }

        .dark {
            background-color: darkgray;
        }

        .whi {
            background-color: white;
        }

        .hover {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-model="newNews.title" placeholder="新闻标题">
        <input type="text" v-model="newNews.url" placeholder="新闻链接">
        <input type="text" v-model="newNews.content" placeholder="新闻内容">
        <button @click="addNews">添加新闻</button>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>链接</th>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(news, index) in newsList" :key="index"
                    :class="{ 'dark': index % 2 == 0, 'whi': index % 2== 1, 'hover': show == index }"
                    @mouseover="show = index" @mouseout="show = -1">
                    <td>{{index + 1}}</td>
                    <td>{{news.title}}</td>
                    <td>{{news.url}}</td>
                    <td>{{news.content}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <hr>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>链接</th>
                    <th>内容</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(news, index) in newsList" :key="index" v-color="index">
                    <td>{{index + 1}}</td>
                    <td>{{news.title}}</td>
                    <td>{{news.url}}</td>
                    <td>{{news.content}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="../vue.js"></script>
    <script>
        Vue.directive('color', function (ele, obj) {
            if (obj.value % 2 == 0) {
                ele.style.backgroundColor = 'darkgray';
            } else {
                ele.style.backgroundColor = 'white';
            }
        })
        new Vue({
            el: '#app',
            data: {
                newNews: {
                    title: '',
                    content: '',
                    url: ""
                },
                newsList: [{
                    title: '22',
                    content: '22',
                    url: "22"
                }, {
                    title: '33',
                    content: '33',
                    url: "33"
                }, {
                    title: '11',
                    content: '22',
                    url: "33"
                }],
                show: -1
            },
            methods: {
                addNews() {
                    this.newsList.push({ ...this.newNews });
                    this.newNews.title = '';
                    this.newNews.content = '';
                    this.newNews.url = '';
                    console.log(this);

                },
                del(index) {
                    this.newsList.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>